<template>
  <div class="container">
    <div class="tabs-content">
      <a-tabs v-model:activeKey="activeKey" type="card">
        <a-tab-pane key="1" tab="Base地分布">
          <div class="tab-container">
            <e-charts class="chart" :option="baseOption" />
            <div class="form">
              <a-table
                :columns="baseColumns"
                :data-source="baseTableVos"
                :pagination="false"
                :scroll="{ y: 320 }"
              ></a-table>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="用户教育背景">
          <div class="tab-container">
            <e-charts class="chart" :option="educationBg" />
            <div class="form">
              <a-table
                :columns="educationColumns"
                :data-source="educationDataSource"
                :pagination="false"
                :scroll="{ y: 320 }"
              ></a-table>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="用户专业分布">
          <div class="tab-container">
            <e-charts class="chart" :option="specialityNum" />
            <div class="form">
              <a-table
                :columns="specialityColumns"
                :data-source="specialityDataSource"
                :pagination="false"
                :scroll="{ y: 320 }"
              ></a-table>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="薪资范围分布">
          <div class="tab-container">
            <e-charts class="chart" :option="salaryRange" />
            <div class="form">
              <a-table
                :columns="salaryColumns"
                :data-source="salaryDataSource"
                :pagination="false"
                :scroll="{ y: 320 }"
              ></a-table>
            </div>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6" tab="职位状态分布">
          <div class="tab-container">
            <e-charts class="chart" :option="positionStatus" />
            <div class="form">
              <a-table
                :columns="positionColumns"
                :data-source="positionDataSource"
                :pagination="false"
                :scroll="{ y: 320 }"
              ></a-table>
            </div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import server from '@/api'

const activeKey = ref('1')
const educationBg = computed(() => {
  const data = educationEData.value?.map(item => item.value) // 使用educationEdata中的value数据，如果没有则使用默认数据
  return {
    title: {
      text: '用户教育背景',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: ['合肥工业大学', '南京理工大学', '武汉大学', '北京理工大学', '浙江大学'],
        axisTick: {
          alignWithLabel: true,
        },
      },
    ],
    yAxis: [
      {
        type: 'value',
      },
    ],
    series: [
      {
        name: '人数',
        type: 'bar',
        barWidth: '60%',
        data: data, // 使用提取的数据
      },
    ],
  }
})
// 专业
const specialityNum = computed(() => {
  return {
    title: {
      text: '用户专业分布',
      left: 'center',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    tooltip: {
      trigger: 'item',
      // 调整提示框样式
      backgroundColor: 'rgba(0, 0, 0, 0.7)', // 设置提示框背景颜色为半透明黑色
      borderColor: '#fff', // 设置提示框边框颜色为白色
      borderWidth: 1, // 设置提示框边框宽度
      padding: 10, // 设置提示框内边距
      textStyle: {
        color: '#fff', // 设置提示框文字颜色为白色
      },
      // 调整提示框位置，避免遮挡
    },
    legend: {
      orient: 'vertical',
      left: 'left',
    },
    series: [
      {
        name: '用户专业',
        type: 'pie',
        // 适当减小半径，留出更多空间
        radius: '40%',
        data: majorEData.value,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  }
})
const jobPassRate = computed(() => {
  return {
    title: {
      text: '岗位通过率',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['岗位通过率'],
    },
    grid: {
      left: '4%',
      right: '5%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['前端开发', '后端开发', '测试开发', '硬件开发', '产品经理'],
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 100,
      axisLabel: {
        formatter: '{value}%',
      },
    },
    series: [
      {
        name: '岗位通过率',
        type: 'line',
        data: [80, 75, 85, 70, 90], // 这里假设的通过率数据，你可以根据实际情况修改
      },
    ],
  }
})
const salaryRange = computed(() => {
  return {
    title: {
      text: '薪资范围分布',
      left: 'center',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    series: [
      {
        name: '薪资范围',
        type: 'pie',
        radius: '70%',
        center: ['50%', '50%'],
        data: salaryEData.value,
      },
    ],
  }
})
const positionStatus = computed(() => {
  return {
    title: {
      text: '职位状态分布',
      left: 'center',
    },
    tooltip: {
      trigger: 'item',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: '职位状态',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['50%', '70%'],
        startAngle: 180,
        endAngle: 360,
        data: statusEData.value,
      },
    ],
  }
})
const option = ref({})

const baseColumns = [
  {
    title: 'Base地',
    dataIndex: 'base',
    key: 'base',
    width: 200,
  },
  {
    title: '用户base地数量',
    dataIndex: 'userBaseCount',
    key: 'userBaseCount',
    width: 200,
  },
  {
    title: '职位base地数量',
    dataIndex: 'jobBaseCount',
    key: 'jobBaseCount',
    width: 200,
  },
]

const educationColumns = [
  {
    title: '教育背景',
    dataIndex: 'education',
    key: 'education',
    width: 200,
  },
  {
    title: '人数',
    dataIndex: 'count',
    key: 'count',
    width: 200,
  },
]
const educationDataSource = computed(() => {
  return educationEData.value?.map((item, index) => {
    return {
      key: index,
      education: item.name,
      count: item.value,
    }
  })
})

const specialityColumns = [
  {
    title: '专业',
    dataIndex: 'speciality',
    key: 'speciality',
    width: 200,
  },
  {
    title: '人数',
    dataIndex: 'count',
    key: 'count',
    width: 200,
  },
]
const specialityDataSource = computed(() => {
  return majorEData.value?.map((item, index) => {
    return {
      key: index,
      speciality: item.name,
      count: item.value,
    }
  })
})

const salaryColumns = [
  {
    title: '薪资范围',
    dataIndex: 'salaryRange',
    key: 'salaryRange',
    width: 200,
  },
  {
    title: '数量',
    dataIndex: 'count',
    key: 'count',
    width: 200,
  },
]
const salaryDataSource = computed(() => {
  return salaryEData.value?.map((item, index) => {
    return {
      key: index,
      salaryRange: item.name,
      count: item.value,
    }
  })
})

const positionColumns = [
  {
    title: '职位状态',
    dataIndex: 'positionStatus',
    key: 'positionStatus',
    width: 200,
  },
  {
    title: '数量',
    dataIndex: 'count',
    key: 'count',
    width: 200,
  },
]
const positionDataSource = computed(() => {
  return statusRatios.value?.map((item, index) => {
    switch (item.status) {
      case 0:
        item.status = '已创建'
        break
      case 1:
        item.status = '已发布'
        break
      case 2:
        item.status = '已暂停'
        break
      case 3:
        item.status = '已关闭'
        break
      case 5:
        item.status = '已招满'
        break
    }
    return {
      key: index,
      positionStatus: item.status,
      count: item.count,
    }
  })
})

const baseTableVos = ref([])
const baseIndicator = ref([])
const jobPositionCount = ref([])
const userPositionCount = ref([])
const baseOption = ref()
const getBaseRatios = async () => {
  baseTableVos.value = []
  baseIndicator.value = []
  jobPositionCount.value = []
  userPositionCount.value = []
  baseOption.value = null
  const res = await server.getLocationRatios()
  let applicantDataList = res.data.data.applicantDataList
  let positionDataList = res.data.data.positionDataList
  positionDataList?.forEach(item => {
    baseTableVos.value.push({
      base: item.location,
      jobBaseCount: item.count,
      userBaseCount: 0,
    })
  })
  baseTableVos.value.forEach(item => {
    applicantDataList.forEach(applicant => {
      if (item.base === applicant.location) {
        item.userBaseCount = applicant.count
      }
    })
  })
  baseTableVos.value.forEach(item => {
    baseIndicator.value.push({
      name: item.base,
      max: 15,
    })
  })
  baseTableVos.value.forEach(item => {
    jobPositionCount.value.push(item.jobBaseCount)
  })
  baseTableVos.value.forEach(item => {
    userPositionCount.value.push(item.userBaseCount)
  })
  baseOption.value = {
    title: {
      text: 'Base地分布图',
      // left: 'center',
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
      right: 130,
    },
    legend: {
      orient: 'vertical',
      right: 10,
      center: 'bottom',
      data: ['用户base地', '职位base地'],
    },
    radar: {
      // shape: 'circle',
      indicator: baseIndicator.value,
    },
    series: [
      {
        name: '用户base地 vs 职位base地',
        type: 'radar',
        data: [
          {
            value: userPositionCount.value,
            name: '用户base地',
          },
          {
            value: jobPositionCount.value,
            name: '职位base地',
          },
        ],
      },
    ],
  }
}

const statusRatios = ref()
const statusEData = ref()
const getStatusRatios = async () => {
  const res = await server.getStatusRatios()
  if (res.data.code === 0) {
    statusRatios.value = res.data.data.dataList
    statusEData.value = statusRatios.value.map(item => {
      switch (item.status) {
        case 0:
          item.status = '已创建'
          break
        case 1:
          item.status = '已发布'
          break
        case 2:
          item.status = '已暂停'
          break
        case 3:
          item.status = '已关闭'
          break
        case 5:
          item.status = '已招满'
          break
      }
      return {
        value: item.count,
        name: item.status,
      }
    })
  }
}
const salaryRatios = ref()
const salaryEData = ref()
const getSalaryRatios = async () => {
  const res = await server.getSalaryRatios()

  if (res.data.code === 0) {
    salaryRatios.value = res.data.data.dataList
    salaryEData.value = salaryRatios.value?.map(item => {
      return {
        value: item.count,
        name: item.salary,
      }
    })
    console.log(salaryEData.value)
  }
}
const majorRatios = ref()
const majorEData = ref()
const getMajorRatios = async () => {
  const res = await server.getApplicantMajorRatio()
  if (res.data.code === 0) {
    majorRatios.value = res.data.data.dataList
    majorEData.value = majorRatios.value?.map(item => {
      return {
        value: item.count,
        name: item.major,
      }
    })
  }
}

const educationRatios = ref()
const educationEData = ref()
const getEducationBg = async () => {
  const res = await server.getApplicantBgRatio()
  if (res.data.code === 0) {
    educationRatios.value = res.data.data.dataList
    educationEData.value = educationRatios.value?.map(item => {
      return {
        value: item.count,
        name: item.bg,
      }
    })
    console.log(educationEData.value)
  }
}
watch(
  () => activeKey.value,
  val => {
    if (val === '1') {
      getBaseRatios()
    } else if (val === '2') {
      getEducationBg()
    } else if (val === '3') {
      getMajorRatios()
    } else if (val === '4') {
      option.value = jobPassRate.value
    } else if (val === '5') {
      getSalaryRatios()
    } else if (val === '6') {
      getStatusRatios()
    }
  },
)

onMounted(() => {
  getBaseRatios()
})
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #fff;

  .tabs-content {
    padding: 15px;
  }
}

.tab-container {
  overflow: hidden;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;

  .chart {
    overflow: hidden;
    width: 100%;
    height: 380px;
  }

  .form {
    overflow: auto;
    width: 100%;
    height: 100%;
    margin-right: 20px;
  }

  .form .ant-table {
    overflow: hidden;
  }
}

:deep(.ant-input-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}

:deep(.ant-picker-disabled) {
  border: none;
  background-color: #fff;
  color: #000;
}
</style>
